<template>
    <basic-container>

        <el-row style="padding: 10px 20px;">
            <!-- 搜索自定义 -->
            <div style="float: left">
                <span class="demonstration">商品分类：</span>
                <el-cascader v-model="productData" :options="chooseProductOption" size="mini"
                             @change="handleChange"></el-cascader>
            </div>

            <div style="float: left; margin-left:10px">
                <span class="demonstration">商品品牌：</span>
                <el-select v-model="goodsBrandId" placeholder="请选择" size="mini">
                    <el-option
                            v-for="item in chooseGoodsBrand"
                            :key="item.id"
                            :label="item.brandName"
                            :value="item.id">
                    </el-option>
                </el-select>
            </div>

            <div style="float: left; margin-left:10px">
                <span class="demonstration">店铺名称：</span>
                <el-select v-model="storeId" placeholder="请选择" size="mini">
                    <el-option
                            v-for="item in chooseStoreName"
                            :key="item.id"
                            :label="item.storeName"
                            :value="item.id">
                    </el-option>
                </el-select>
            </div>
        </el-row>

        <el-row style="padding: 10px 20px">
            <el-radio-group v-model="timeSize" size="mini" @change="changeTimeSize">
                <el-radio-button label="2">前日</el-radio-button>
                <el-radio-button label="7">最近7天</el-radio-button>
                <el-radio-button label="30">最近30天</el-radio-button>
            </el-radio-group>
            <span style="margin-left:10px">时间筛选：</span>
            <el-date-picker placeholder="开始时间" @change="getBeforeTime" value-format="yyyy-MM-dd" v-model="beginTime"
                            type="date" size="mini">
            </el-date-picker>

            <span style="margin-left:5px">至</span>

            <el-date-picker style="margin-left: 5px" placeholder="结束日期" @change="getTime" value-format="yyyy-MM-dd"
                            v-model="endTime" type="date" size="mini">
            </el-date-picker>

            <el-button style="margin-left: 5px" type="primary" size="mini" plain @click.stop="search()">搜索</el-button>
            <el-button style="margin-left: 5px" type="primary" size="mini" plain @click.stop="clear()">清空</el-button>
        </el-row>
<!--        <avue-echart-line :theme="theme" :option="option" :data="data" width="1200"></avue-echart-line>-->
        <div ref="myEcharts" style="width: 100%;height: 500px;"></div>
        <avue-crud :data="topTen" :option="option2" :row-style="rowStyle">
        </avue-crud>
    </basic-container>
</template>
<script>
    import {
        getGoodsViewsList
    } from "@/api/base/reportCenter/orderStatistics";
    import {
        getGoodsClassAll,
        getGoodsBrandAll
    } from "@/api/base/goods/seller/goods";
    import {
        getStoreAll,
    } from "@/api/base/store/store";
    import {onlyDateFormat} from '@/util/date'

    export default {
        data() {
            return {
                timeSize:'',//时间跨度
                fillColor:'#73A0C8',
                goodsClassId: '',
                goodsBrandId: '',
                storeId: '',
                productData: [],
                chooseProductOption: [],
                chooseGoodsBrand: [],
                chooseStoreName: [],
                theme: '',
                tabActiveName: 'first', //tab页切换
                beginTime: '',
                endTime: '',
                topTen: [],
                option: {
                    switchTheme: true,
                    width: 1200,
                    height: 600,
                    title: '手机大比拼',
                    smooth: true,//是否顺滑
                },

                option2: {
                    title: '商品流量排行',
                    excelBtn: true,
                    selection: true,
                    menuType: 'text',
                    index: true,
                    page: false,
                    align: 'center',
                    dateDefault: true,
                    menuAlign: 'center',
                    menu: false,
                    addBtn: false,
                    columnBtn: false,
                    refreshBtn: false,
                    column: [
                        {
                            label: "商品名称",
                            prop: "goodsName",
                        },
                        {
                            label: '店铺名称',
                            prop: 'storeName'
                        },
                        {
                            label: '访客数',
                            prop: 'viewNum'
                        }
                    ]
                }
            }
        },
        created() {
            getGoodsClassAll().then(res => {
                if (res.data.code === 200) {
                    this.chooseProductOption = res.data.data;
                }
            });
            getGoodsBrandAll().then(res => {
                if (res.data.code === 200) {
                    this.chooseGoodsBrand = res.data.data;
                }
            });
            getStoreAll().then(res => {
                if (res.data.code === 200) {
                    this.chooseStoreName = res.data.data;
                }
            });

        },
        methods: {
            // 选择时间跨度
            changeTimeSize(value) {
                let date = Date.now() - value * 24 * 60 * 60 * 1000;
                this.endTime = onlyDateFormat(new Date());
                this.beginTime = onlyDateFormat(new Date(date));
                this.transferMethod();
            },
            handleChange(value) {
                if (value.length > 0) {
                    this.goodsClassId = value[value.length - 1];
                }
            },

            getBeforeTime() {
                if (this.endTime) {
                    if (this.beginTime > this.endTime) {
                        this.$message({
                            type: "error",
                            message: "开始时间不能大于结束时间"
                        });
                        this.beginTime = ''
                    }
                }
            },
            getTime() {
                if (this.beginTime > this.endTime) {
                    this.$message({
                        type: "error",
                        message: "结束时间不能小于开始时间"
                    });
                    this.endTime = ''
                }
            },
            search() {
                this.transferMethod()
            },
            clear() {
                this.beginTime = "";
                this.endTime = "";
                this.productData = [];
                this.goodsClassId = "";
                this.goodsBrandId = "";
                this.storeId = "";
                this.transferMethod()
            },
            async transferMethod() {
                let mychart = this.$ECHARTS.init(this.$refs.myEcharts)
                console.log(mychart);
                let beginTimeStr = this.beginTime === null ? "" : this.beginTime;
                let endTimeStr = this.endTime === null ? "" : this.endTime;
                await getGoodsViewsList(beginTimeStr, endTimeStr, this.goodsClassId, this.goodsBrandId, this.storeId).then(res => {
                    if (res.data.code === 200) {
                        console.log(res.data.data.yData);
                        let options = {
                            title: {
                                text: '浏览量',   //图表顶部的标题
                            },
                            tooltip: {   //鼠标悬浮框的提示文字
                                trigger: 'axis'
                            },
                            xAxis : [{  //x轴坐标数据
                                type : 'category',
                                boundaryGap : true,
                                data : res.data.data.xData
                            }],
                            yAxis : [{   //y轴坐标数据
                                type : 'value',
                            }],
                            series: [  //驱动图表生成的数据内容数组，几条折现，数组中就会有几个对应对象，来表示对应的折线
                                {
                                    name:"浏览量",
                                    type: "line",  //pie->饼状图  line->折线图  bar->柱状图
                                    smooth:true,
                                    data:res.data.data.yData,
                                }
                            ]}
                        mychart.setOption(options);
						this.topTen = res.data.data.topTen;
                    } else {
                        this.$message({
                            type: "error",
                            message: res.data.message
                        });
                    }
                })
            },
            rowStyle({row, column, rowIndex}) {
                if (rowIndex % 2 === 0) {
                    return {
                        backgroundColor: '#eee',
                        color: 'black'
                    }
                }
            }
        },
        mounted() {
            this.transferMethod()
        }
    }
</script>
